<template>
    <div class="divBox">
      <el-row :gutter="24" class="mb20">
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
<!--                  <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />-->
<!--                  <span class="ivu-pl-8">订单</span>-->
                  <div class="header_title">投诉类型</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPhoto.categoryCensusList"></echarts-from>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">投诉处理状态</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" echartsTitle="circle" :seriesData="seriesPhoto.handleCensusList"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">随手拍各类型投诉量统计</div>
                </div>
                <div class="checkTime">
                  <el-radio-group v-model="photoDate" class="ivu-mr-8" @change="photoChange">
                    <el-radio-button label="15">15天</el-radio-button>
                    <el-radio-button label="7">周</el-radio-button>
                    <el-radio-button label="30">月</el-radio-button>
<!--                    <el-radio-button label="365">年</el-radio-button>-->
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataPhotoType" :seriesData="seriesPhotoType" :xAxis="xAxisPhotoType" :legendData="legendDataPhotoType"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24" class="mb20">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">随手拍各处理状态投诉量统计</div>
                </div>
                <div class="checkTime">
                  <el-radio-group v-model="visitDate" class="ivu-mr-8" @change="radioChange">
                    <el-radio-button label="15">15天</el-radio-button>
                    <el-radio-button label="7">周</el-radio-button>
                    <el-radio-button label="30">月</el-radio-button>
<!--                    <el-radio-button label="365">年</el-radio-button>-->
                  </el-radio-group>
                </div>
              </div>
            </div>
            <h4></h4>
            <echarts-from ref="visitChart" :yAxisData="yAxisDataPhotoStatus" :seriesData="seriesPhotoStatus" :xAxis="xAxisPhotoStatus" :legendData="legendDataPhotoStatus"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <!-- <el-avatar icon="el-icon-s-data" size="small" style="color:#1890ff;background:#e6f7ff;font-size: 13px" />
                  <span class="ivu-pl-8">订单</span> -->
                  <div class="header_title">用户概览</div>
                </div>
              </div>
            </div>
            <div class="special-chat" ref="visitChart">
              <img :src="statisticsBg">
              <div class=special-chat-box>
                <div class="line-box">
                  <div class="chat-line">注册用户数量：{{seriesUser.regoCount}}</div>
                  <div class="chat-line">访客：{{seriesUser.visitCount}}</div>
                </div>
                <div class="line-box">
                  <div class="chat-line">活跃用户数量：{{seriesUser.briskCount}}</div>
                  <div class="chat-line">随手拍：{{seriesUser.formCount}}</div>
                </div>
                <div class="line-box">
                  <div class="chat-line">采纳用户数量：{{seriesUser.acceptCount}}</div>
                  <div class="chat-line">立案受理：{{seriesUser.registerCount}}</div>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>
<script>
import {
  chartPersonPie,
  chartElcPie,
  chartPointPie,
  chartWorkshopPie,
  chartModelTypePie,
  chartTestsPie,
  chartTestsMtPie,

  chartOrder30Api,
  chartOrderWeekApi,
  chartOrderMonthApi,
  chartOrderYearApi,
  viewModelApi, chartOrderCensus, getBehindTriangleCensus,
} from '@/api/dashboard';
  import echartsFrom from '@/components/echarts/index';
  import { checkPermi } from "@/utils/permission"; // 权限判断函数
  export default {
    components: {echartsFrom},
    data() {
      return {
        //info: {},
        infoList: null,
        statisticsBg:require("@/assets/imgs/statistic_bg.jpg"),

        seriesPhoto:[],

        visitDate: 15,
        photoDate: 15,

        seriesPhotoType: [],
        xAxisPhotoType: [],
        legendDataPhotoType: [],
        yAxisDataPhotoType:[],
        seriesPhotoStatus: [],
        xAxisPhotoStatus: [],
        legendDataPhotoStatus: [],
        yAxisDataPhotoStatus:[],

        seriesUser:[],

        yAxisData: [],
      }
    },
    mounted(){
      this.yAxisDataPhotoType = [
        {
          type: 'value',
          name: '随手拍数量趋势',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '随手拍数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
      this.yAxisDataPhotoStatus = [
        {
          type: 'value',
          name: '随手拍数量趋势',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '随手拍数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
      ]
      this.yAxisData = [
        {
          type: 'value',
          name: '试验数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '成功数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
          // axisLabel: {
          //     formatter: '{value} °C'
          // }
        }
      ]
    },
    methods: {
      radioChange(val){
        this.visitDate=val
        this.chartPhotoStatus()
      },
      photoChange(val){
        this.photoDate=val
        this.chartPhotoType()
      },
      checkPermi,
      //饼图
      statisticsPhotoPie(){
        viewModelApi().then(async res => {
        // let res = {
        //   "typeList": [
        //     {
        //       "name": "基础设施不完善",
        //       "value": 60
        //     },
        //     {
        //       "name": "公共秩序不文明行为",
        //       "value": 33
        //     },
        //     {
        //       "name": "公共环境卫生不文明行为",
        //       "value": 44
        //     },
        //     {
        //       "name": "交通不文明行为",
        //       "value": 15
        //     },
        //     {
        //       "name": "居民小区不文明行为",
        //       "value": 55
        //     },
        //   ],
        //   "statusList": [
        //     {
        //       "name": "待处理",
        //       "value": 10
        //     },
        //     {
        //       "name": "立案受理",
        //       "value": 55
        //     },
        //     {
        //       "name": "驳回",
        //       "value": 7
        //     },
        //     {
        //       "name": "结案",
        //       "value": 87
        //     }
        //   ]
        // }
          this.seriesPhoto = res;
        })
      },
      //柱状图
      chartPhotoType() {
        this.xAxisPhotoType = []
        this.legendDataPhotoType = []
        chartOrder30Api({type:this.photoDate}).then(async res => {
        //后期接口调用
        // let res = {
        //   "typeData":{"03-01":[10,20,30,40,25],"03-02":[20,10,40,30,11],"03-03":[15,15,20,30,0],"03-04":[30,20,40,1,25],"03-05":[10,20,30,40,25],
        //     "03-06":[10,20,30,40,25],"03-07":[20,10,40,30,11],"03-08":[15,15,20,30,0],"03-09":[30,20,40,1,25],"03-10":[10,20,30,40,25],
        //     "03-11":[10,20,30,40,25],"03-12":[20,10,40,30,11],"03-13":[15,15,20,30,0],"03-14":[30,20,40,1,25],"03-15":[10,20,30,40,25]},
        //   "numData":{"03-01":125,"03-02":111,"03-03":80,"03-04":116,"03-05":125,
        //     "03-06":125,"03-07":111,"03-08":80,"03-09":116,"03-10":125,
        //     "03-11":125,"03-12":111,"03-13":80,"03-14":116,"03-15":125}
        // };

        //this.info = res
        let num = []
        let nums1 = []
        let nums2 = []
        let nums3 = []
        let nums4 = []
        let nums5 = []
        for (let key  in res.countsData) {
          nums1.push(Number(res.countsData[key][0]))
          nums2.push(Number(res.countsData[key][1]))
          nums3.push(Number(res.countsData[key][2]))
          nums4.push(Number(res.countsData[key][3]))
          nums5.push(Number(res.countsData[key][4]))
          this.xAxisPhotoType.push(key)
        }
        for (let key  in res.countData) {
          num.push(Number(res.countData[key]))
        }
        this.legendDataPhotoType = ['基础设施不完善','公共秩序不文明行为','公共环境卫生不文明行为','交通不文明行为','居民小区不文明行为','随手拍量趋势']
        this.seriesPhotoType = [{
          name:"基础设施不完善",
          type:"bar",
          stack: 'Ad',
          barWidth: '50px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#4BCAD5',
            }
          },
          data: nums1
        }, {
          name:"公共秩序不文明行为",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#91cc75',
            }
          },
          data: nums2
        }, {
          name:"公共环境卫生不文明行为",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#fac858',
            }
          },
          data: nums3
        }, {
          name:"交通不文明行为",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#ee6666',
            }
          },
          data: nums4
        },  {
          name:"居民小区不文明行为",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#fda865',
            }
          },
          data: nums5
        }, {
          name:"随手拍量趋势",
          type:"line",
          smooth: true,
          itemStyle:{
            normal:{
              color:'#1890ff',
            }
          },
          yAxisIndex: 1,
          data: num
        }]
        })
      },
      chartPhotoStatus() {
        this.xAxisPhotoStatus = []
        this.legendDataPhotoStatus = []
       chartOrderCensus({type:this.visitDate}).then(async res => {
        //后期接口调用
        // let res = {
        //   "statusData":{"03-01":[30,40,25],"03-02":[20,10,40],"03-03":[15,30,0],"03-04":[30,20,40],"03-05":[10,20,25],
        //     "03-06":[10,40,25],"03-07":[40,30,11],"03-08":[15,15,20],"03-09":[30,1,25],"03-10":[30,40,25],
        //     "03-11":[10,20,25],"03-12":[20,30,11],"03-13":[15,15,0],"03-14":[40,1,25],"03-15":[10,20,30]},
        //   "numData":{"03-01":95,"03-02":70,"03-03":45,"03-04":90,"03-05":55,
        //     "03-06":75,"03-07":81,"03-08":50,"03-09":56,"03-10":95,
        //     "03-11":55,"03-12":61,"03-13":30,"03-14":66,"03-15":60}
        // };

        //this.info = res
        let num = []
        let nums1 = []
        let nums2 = []
        let nums3 = []
        for (let key in res.countsData) {
          nums1.push(Number(res.countsData[key][0]))
          nums2.push(Number(res.countsData[1]))
          nums3.push(Number(res.countsData[2]))
          this.xAxisPhotoStatus.push(key)
        }
        for (let key in res.countData) {
          num.push(Number(res.countData[key]))
        }
        this.legendDataPhotoStatus = ['立案受理','驳回','结案']
        this.seriesPhotoStatus = [{
          name:"立案受理",
          type:"bar",
          stack: 'Ad',
          barWidth: '50px',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#4BCAD5',
            }
          },
          data: nums1
        }, {
          name:"驳回",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#ff7070',
            }
          },
          data: nums2
        }, {
          name:"结案",
          type:"bar",
          stack: 'Ad',
          emphasis: {
            focus: 'series'
          },
          itemStyle:{
            normal:{
              color:'#91cc75',
            }
          },
          data: nums3
        }, {
          name:"随手拍量趋势",
          type:"line",
          smooth: true,
          itemStyle:{
            normal:{
              color:'#1890ff',
            }
          },
          yAxisIndex: 1,
          data: num
        }]
        })
      },
      //
      chartUser(){
        getBehindTriangleCensus().then(async res => {
        //let res = {"userCount":107,"visitCount":30635,"activeUserCount":88,"photoCount":1102,"yesUserCount":55,"yesPhotoCount":542}
        this.seriesUser = res;
        })
      },
      // 时间改变
      handleChangeVisitType() {
        this.xAxis = []
        this.legendData = []
        //chartOrder30Api().then(async res => {
        //后期接口调用
        let res = {
          "price":{"09-24":"110","09-25":"294","09-26":"0","09-27":"100","09-28":0,"09-29":"269","09-30":"294","10-01":"0","10-02":0,"10-03":"323","10-04":"614","10-05":"750","10-06":"811","10-07":"100","10-08":"295","10-09":"0","10-10":"218","10-11":"511","10-12":"994","10-13":0,"10-14":"681","10-15":"0","10-16":"100","10-17":"0","10-18":"315","10-19":"0","10-20":"106","10-21":"0","10-22":"946","10-23":"50","10-24":"477"},
          "quality":{"09-24":30,"09-25":20,"09-26":10,"09-27":30,"09-28":0,"09-29":40,"09-30":40,"10-01":10,"10-02":0,"10-03":10,"10-04":50,"10-05":170,"10-06":90,"10-07":30,"10-08":340,"10-09":20,"10-10":100,"10-11":3,"10-12":6,"10-13":0,"10-14":64,"10-15":1,"10-16":2,"10-17":2,"10-18":5,"10-19":4,"10-20":4,"10-21":4,"10-22":13,"10-23":9,"10-24":3}
        };

          //this.info = res
          let pices = []
          let qualitys = []
          for (let key  in res.price) {
            pices.push(Number(res.price[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.legendData = ['试验数','成功数']
          this.series = [{
            name:"试验数",
            type:"bar",
            itemStyle:{
              normal:{
                  color:'#5B8FF9',
              }
            },
            data: pices
          },
            {
              name:"成功数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{
                  color:'#4BCAD5',
              }
              },
              yAxisIndex: 1,
              data: qualitys
            }]
        //})
      },
      handleChangeWeek() {
        this.xAxis = []
        this.legendData = []
        //chartOrderWeekApi().then(async res => {
          this.info = res
          this.legendData = ["上周金额", "本周金额", "上周订单数", "本周订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [
            {
              name :"上周金额",
              type:"bar",
              itemStyle:{
                normal:{
                  color:'#5B8FF9',
                }
              },
              data: prePrice
            },
            {
              name:"本周金额",
              type:"bar",
              itemStyle:{
                normal:{color:'#4BCAD5',}
              },
              data: price
            },
            {
              name:"上周订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{color:'#E6A23C',}
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"本周订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                normal:{color:'#768A9C',}
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        //})
      },
      handleChangeMonth() {
        this.xAxis = []
        this.legendData = []
        //chartOrderMonthApi().then(async res => {
          this.info = res
          this.legendData = ["上月金额", "本月金额", "上月订单数", "本月订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [
            {
              name:"上月金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#5B8FF9',
                }
              },
              data: prePrice
            },
            {
              name:"本月金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#4BCAD5'
                }
              },
              data: price
            },
            {
              name:"上月订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#E6A23C'
                }
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"本月订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#768A9C'
                }
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        //})
      },
      handleChangeYear() {
        this.xAxis = []
        this.legendData = []
        //chartOrderYearApi().then(async res => {
          this.info = res
          this.legendData =  ["去年金额", "今年金额", "去年订单数", "今年订单数"]
          let prePrice = []
          let price = []
          let qualitys = []
          let preQuality = []
          for (let key  in res.prePrice) {
            prePrice.push(Number(res.prePrice[key]))
            this.xAxis.push(key)
          }
          for (let key  in res.price) {
            price.push(Number(res.price[key]))
          }
          for (let key  in res.preQuality) {
            preQuality.push(Number(res.preQuality[key]))
          }
          for (let key  in res.quality) {
            qualitys.push(Number(res.quality[key]))
          }
          this.series = [ ////let col = ["#B37FEB", "#FFAB2B", "#1890FF", "#00C050"];
            {
              name:"去年金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#5B8FF9'
                }
              },
              data: prePrice
            },
            {
              name:"今年金额",
              type:"bar",
              itemStyle:{
                "normal":{
                  color:'#4BCAD5'
                }
              },
              data: price
            },
            {
              name:"去年订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#E6A23C'
                }
              },
              yAxisIndex: 1,
              data: preQuality
            },
            {
              name:"今年订单数",
              type:"line",
              smooth: true,
              itemStyle:{
                "normal":{
                  color:'#768A9C'
                }
              },
              yAxisIndex: 1,
              data: qualitys
            }
          ]
        //})
      },

      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.infoList) this.$refs.visitChart.handleResize();
      }
    },
    created() {
      this.statisticsPhotoPie()
      this.chartPhotoType()
      this.chartPhotoStatus()
      this.chartUser()

      this.handleChangeVisitType();
    }
  }
</script>
<style lang="scss" scoped>
  .acea-row{
    ::v-deep.el-avatar--small {
      width: 22px;
      height: 22px;
      line-height: 22px;
    }
  }
  .special-chat{
    width:100%;
    height:294px;
    position: relative;
    img{
      width:100%;
      height:100%;
      position: absolute;
    }

    .special-chat-box{
      width:100%;
      position: absolute;
      .line-box{
        height:calc(294px / 3);
        line-height:calc(294px / 3);
        display:flex;
        justify-content: space-around;
        .chat-line{
          font-size:18px;
          font-weight:bold;
        }
        .chat-line:nth-child(2){
          color:#fff;
          padding-left:20%;
        }
      }
    }
  }
  .header_title{
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    //padding-left:8px;
    position: relative;
    &::before{
      position: absolute;
      content: '';
      width: 0px;
      height: 18px;
      background: #1890FF;
      top:0;
      left:0;
    }
  }
  .checkTime{
    ::v-deep.el-radio__input{
      display: none;
    }
  }
  .ivu-pl-8{
    margin-left: 8px;
    font-size: 14px;
  }
  .divBox {
    padding: 0 20px !important;
  }
  .dashboard-console-visit {
    ::v-deep.el-card__header{
      padding: 14px 20px !important;
    }
    ul {
      li {
        list-style-type: none;
        margin-top: 12px;
      }
    }
  }
  .ivu-mb{
    margin-bottom: 10px;
  }
</style>
